<template>
	<view class="register-container">
		<view class="register-box">
			<view class="image-container">
				<image src="/static/icon/register.png" mode="aspectFit" class="register-image-top"></image>
				<image src="/static/icon/register2.png" mode="aspectFit" class="register-image"></image>
			</view>
			
			<uni-forms :modelValue="formData">
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.username"
						placeholder="请输入用户名"
						:clearable="true"
						prefixIcon="person"
						:inputBorder="false"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.password"
						type="password"
						placeholder="请输入密码"
						:clearable="true"
						prefixIcon="locked"
						:inputBorder="false"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.password2"
						type="password"
						placeholder="请再次输入密码"
						:clearable="true"
						prefixIcon="locked"
						:inputBorder="false"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.email"
						placeholder="请输入邮箱"
						:clearable="true"
						prefixIcon="email"
						:inputBorder="false"
					/>
				</uni-forms-item>
				
				<uni-forms-item>
					<uni-easyinput
						v-model="formData.mobile"
						placeholder="请输入手机号"
						:clearable="true"
						prefixIcon="phone"
						:inputBorder="false"
					/>
				</uni-forms-item>
			</uni-forms>
			
			<button class="register-btn" type="primary" @click="handleRegister">注册</button>
			
			<view class="login-link" @click="goToLogin">
				已有账号？立即登录
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { CONFIG } from '../../utils/config'

const formData = ref({
	username: '',
	password: '',
	password2: '',
	email: '',
	mobile: ''
})

async function handleRegister() {
	// 表单验证
	if (!formData.value.username || !formData.value.password || !formData.value.password2 || 
		!formData.value.email || !formData.value.mobile) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return
	}
	
	// 验证两次密码是否一致
	if (formData.value.password !== formData.value.password2) {
		uni.showToast({
			title: '两次输入的密码不一致',
			icon: 'none'
		})
		return
	}
	
	// 验证邮箱格式
	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
	if (!emailRegex.test(formData.value.email)) {
			uni.showToast({
				title: '请输入正确的邮箱格式',
				icon: 'none'
			})
			return
	}
	
	// 验证手机号格式
	const mobileRegex = /^1[3-9]\d{9}$/
	if (!mobileRegex.test(formData.value.mobile)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	try {
		const res = await uni.request({
			url: `${CONFIG.base_url}/registerCustomer`,
			method: 'POST',
			data: formData.value
		})
		
		console.log('注册响应:', res)
		
		if (res.data.code === 200) {
			uni.showToast({
				title: res.data.message || '注册成功',
				icon: 'success'
			})
			
			// 注册成功后延迟跳转到登录页
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.data.message || '注册失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('注册失败:', error)
		uni.showToast({
			title: '注册失败，请重试',
				icon: 'none'
		})
	}
}

function goToLogin() {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 40rpx;
	
	.register-box {
		padding: 40rpx;
		margin-top: 100rpx;
		
		.image-container {
			text-align: center;
			margin-bottom: 40rpx;
			
			.register-image-top {
				height: 100rpx;
				width: 400rpx;
				margin-bottom: 20rpx;
			}
			
			.register-image {
				height: 80rpx;
				width: 300rpx;
			}
		}
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 60rpx;
			color: #333;
		}
		
		.register-btn {
			margin-top: 60rpx;
			width: 100%;
		}
		
		.login-link {
			text-align: center;
			margin-top: 30rpx;
			color: #007AFF;
			font-size: 28rpx;
		}
	}
}

:deep(.uni-forms-item) {
	margin-bottom: 30rpx;
}

:deep(.uni-easyinput__content) {
	background-color: #f8f8f8;
	border-radius: 8rpx;
	height: 88rpx;
	padding-left: 20rpx;
	
	.uni-icons {
		color: #666;
	}
}

:deep(.is-input-border) {
	border: none;
}
</style> 